import { Button, Col, Row } from 'antd'; // 引入 Button 组件
import React from 'react';
import './WorkOverview.scss';
import exampleImage from '/777.png'; // 确保替换为实际的图片路径

const WorkOverview: React.FC = () => {
  const projects = [
    { image: exampleImage },
    { image: exampleImage },
    { image: exampleImage },
    { image: exampleImage },
    { image: exampleImage },
    { image: exampleImage },
  ];

  const handleMoreClick = () => {
    // 实现查看更多功能，如跳转到其他页面或加载更多数据
    console.log('查看更多按钮点击');
  };

  return (
    <div className="work-overview">
      <div className="overview-section">
        <h2>最近使用</h2>
        <Row gutter={[10, 0]}> {/* 调整gutter来设置间距 */}
          {projects.map((project, index) => (
            <Col key={index} className="project-col">
              <div className="project-item">
                <div className="folder-icon">
                  <img src={project.image} alt={`Project ${index + 1}`} style={{ width: '200px', height: '140px', objectFit: 'cover' }} />
                </div>
              </div>
            </Col>
          ))}
          <Col className="project-col">
            <div className="project-item more-item">
              <Button type="link" onClick={handleMoreClick} className="more-button">
                查看更多→
              </Button>
            </div>
          </Col>
        </Row>
      </div>
      <div className="overview-section">
        <h2>最近访问</h2>
        <div className="empty-state">
          <div className="search-bar">
            <input type="text" placeholder="搜索" className="search-input" />
            <select className="search-select no-border">
              <option>类型</option>
            </select>
          </div>
          <div className="no-data">
            <img src="/6.png" alt="No Data" className="no-data-image" />
          </div>
        </div>
      </div>
    </div>
  );
};

export default WorkOverview;
